import Nav1 from "../../../assets/images/nav-1.png";
import Nav2 from "../../../assets/images/nav-2.png";
import Nav3 from "../../../assets/images/nav-3.png";
import Nav4 from "../../../assets/images/nav-4.png";
import "./style.scss";

const data = [
    {
        imgUrl: Nav1,
        title: "整租",
        path: "/home/wholeRent",
        alt: "整租"
    },
    {
        imgUrl: Nav2,
        title: "合租",
        path: "/home/sharing",
        alt: "合租"
    },
    {
        imgUrl: Nav3,
        title: "地图找房",
        path: "/home/mapRoom",
        alt: "地图找房"
    },
    {
        imgUrl: Nav4,
        title: "去出租",
        path: "/home/goRent",
        alt: "去出租"
    }
];

function Navigation() {
    function navigationJump(path) {
        console.log(path);
    }
    return (
        <div className="nav">
            {data.map(item => {
                return (
                    <div
                        key={item.path}
                        className="nav_item"
                        onClick={() => navigationJump(item.path)}>
                        <img src={item.imgUrl} alt={item.alt} />
                        <span>{item.title}</span>
                    </div>
                );
            })}
        </div>
    );
}

export default Navigation;
